<template>
<div>
    借款名称: <input type="text" placeholder="请输入借款名称" v-model="WhereInfo.Bname">
    利息:
    <select v-model="WhereInfo.BIid">
        <option value="0">--请选择--</option>
        <option v-for="item in selInfo" :key="item.BI_Id" :value="item.BI_Id">{{ item.BI_Interest }}%</option>
    </select>
    <input type="button" value="查询" @click="LoadData">
    <table border="1">
        <thead>
            <tr>
                <td>借款编号</td>
                <td>借款名称</td>
                <td>借款最高金额</td>
                <td>借款年限</td>
                <td>利息</td>
                <td>借款简介</td>
                <td>借款发布时间</td>
                <td>操作</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info" :key="item.B_Id">
                <td>{{ item.B_Id }}</td>
                <td>{{ item.B_Name }}</td>
                <td>{{ item.B_MaxMoney }}CNY</td>
                <td>{{ item.B_Year }}年</td>
                <td>{{ item.BI_Interest }}%</td>
                <td>{{ item.B_Remark }}</td>
                <td>{{ item.B_CreateDate.substring(0,10) }}</td>
                <td>
                    <slot :id="item.B_Id"></slot>
                </td>
            </tr>
        </tbody>
    </table>

    <span>
        总共{{ PageInfo.totalCount }}条数据,每页显示{{ PageInfo.PageSize }}条,当前第{{ PageInfo.PageIndex }}/{{ PageInfo.PageCount }}页&nbsp;

        <a href="#" @click="PageSet('F')">首页</a>&nbsp;
        <a href="#" @click="PageSet('U')">上一页</a>&nbsp;
        <a href="#" @click="PageSet('N')">下一页</a>&nbsp;
        <a href="#" @click="PageSet('E')">尾页</a>&nbsp;
    </span>
</div>
</template>

<script setup lang="ts">
import {ref,onMounted} from'vue';
import axios from 'axios';

//创建响应式数据
const info=ref([{
    B_Id:0,
    B_Name:"",
    B_MaxMoney:0,
    B_Year:0,
    B_Remark:"",
    B_CreateDate:"",
    BI_Id:0,
    BI_Interest:0
}])

//创建响应式数据用于绑定下拉
const selInfo=ref([{
    BI_Id:0,
    BI_Interest:0
}])


//创建响应式数据 用于查询
const WhereInfo=ref({
    Bname:"",
    BIid:0
})

//创建响应式数据用于分页
const PageInfo=ref({
    PageIndex:1,//当前页
    PageSize:2,//每页显示
    totalCount:0,//总条数
    PageCount:0//总页数
})

//创建生命周期函数钩
onMounted(()=>{
    GetSelect()
    LoadData()
})

//完成下拉框数据加载
const GetSelect=()=>{
    axios.get("https://localhost:44309/api/Borrows/ShowInterest")
    .then(res=>{
        selInfo.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}

//完成数据加载
const LoadData=()=>{
    axios.get("https://localhost:44309/api/Borrows/ShowBorrowMoney",
        {
            params:{
                Bname:WhereInfo.value.Bname,
                BIid:WhereInfo.value.BIid,
                PageIndex:PageInfo.value.PageIndex,
                PageSize:PageInfo.value.PageSize
            }
        }
    )
    .then(res=>{
        info.value=res.data.Plist

        //总条数
        PageInfo.value.totalCount=res.data.totalCount;
        //总页数
        PageInfo.value.PageCount=res.data.PageCount;
    })
    .catch(error=>{
        console.log(error);
    })
}

//完成分页
const PageSet=(val:string)=>{
    switch(val)
    {
        case 'F':
            //首页 当前页=1
            PageInfo.value.PageIndex=1;
        break;

        case 'U':
            //上一页 当前页-1
            if(PageInfo.value.PageIndex>1)
            {
                PageInfo.value.PageIndex--;
            }
            else
            {
                alert('当前已经是首页');
                return;
            }
            
        break;

        case 'N':
            ///下一页 当前页+1
            if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
            {
                PageInfo.value.PageIndex++;
            }
            else
            {
                alert('当前已经是尾页');
                return;
            }
        break;

        case 'E':
            //尾页 当前页=最大页数
            PageInfo.value.PageIndex=PageInfo.value.PageCount;
        break;
    }
    LoadData();
}
</script>
